<template>
  <div>
    <ul>
      <!-- <li v-for="hero in heros"
          :key="hero.id">
        {{hero.id}}====={{hero.name}}===={{hero.score}}
      </li>
      <hr>
      <li v-for="(hero,index) in heros"
          :key="index">
        {{index}}
        {{hero.id}}===={{hero.name}}===={{hero.score}}
      </li>
      <hr> -->
      <li v-for="(hero,index) in heros"
          :key="index"
          :class="{'A':'red','B':'blue','C':'green','D':'pink'}[hero.score]">
        {{index}}
        {{hero.name}}===={{hero.score}}
        <button @click="del(index)">删除</button>
      </li>
    </ul>
    <hr>
    英雄姓名：<input type="text"
           v-model="name"><br>
    英雄成绩：<input type="text"
           v-model="score"><br>
    <button @click="addHero">添加英雄</button>

  </div>
</template>

<script>
export default {
  data () {
    return {
      name: '',
      score: '',
      heros: [
        {
          id: 1,
          name: '奥利安娜',
          score: 'A'
        },
        {
          id: 2,
          name: '崔斯特',
          score: 'B'
        },
        {
          id: 3,
          name: '雷锋',
          score: 'C'
        },
        {
          id: 4,
          name: '阿拉斯加',
          score: 'D'
        }
      ]
    }
  },
  components: {

  },
  methods: {
    addHero () {
      // 获取页面输入的值   --v-model
      this.heros.push({
        name: this.name,
        score: this.score
      });
      this.name = '';
      this.score = '';
    },
    del (index) {
      this.heros.splice(index, 1);
    }
  }
}
</script>

<style>
.red {
  background-color: red;
}
.green {
  background-color: green;
}
.blue {
  background-color: blue;
}
.pink {
  background-color: pink;
}
</style>
